<template>
<!-- 流程设置 -->
<Card style="height:800px">
  <header>
    <span>流程节点:</span>
    <Select v-model="nodeCode" style="width:200px">
        <Option v-for="item in nodeCodesData" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <span style="margin:0px 0px 0px 20px">角色名称:</span>
    <Select v-model="roleCode" style="width:200px">
        <Option v-for="item in roleCodeData" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <Button type="primary" @click="initPage"  style="margin:0px 0px 0px 20px;width: 90px">查询</Button>
    <Button type="primary" @click="addPage" style="margin:0px 0px 0px 20px;width: 130px">新增流程节点权限</Button>
  </header>
  <Content style="margin-top:20px;">
    <Table border :columns="tableColumns" :data="tableDatas"></Table>
  </Content>
  <div style="text-align:center;width:50%;margin:100px auto;">
    <Page :total="totalPage" :current="currentPage" :page-size="pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
  </div>
</Card>
</template>

<script>
export default {

  data () {
    return {
      tableColumns: [{
        type: 'index',
        title: '序号'
      },
      {
        title: '节点编码',
        key: 'nodeCode'
      },
      {
        title: '节点名称',
        key: 'nodeName'
      },
      {
        title: '角色编码',
        key: 'roleCode'
      },
      {
        title: '角色名称',
        key: 'roleName'
      },
      {
        title: '是否有效',
        key: 'status'
      },
      {
        title: '最近更新人',
        key: 'update_by'
      },
      {
        title: '最近更新时间',
        key: 'updated_date'
      },
      {
        title: '操作',
        render: (h, param) => {
          const vm = this
          return h('div', {}, [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                fontSize: '12px'
              },
              on: {
                click: () => {
                  vm.handleRouterGo('case_node_role_modify', param.row.id)
                }
              }
            }, '编辑')
          ])
        }
      }
      ],
      tableDatas: [],
      nodeCodesData: [],
      roleCodeData: [],
      opinionClasssData: [{
        value: '',
        label: '请选择'
      },
      {
        value: 0,
        label: '拒绝'
      },
      {
        value: 1,
        label: '违例'
      }
      ],
      nodeCode: null,
      opinionClass: null,
      totalPage: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.currentPage = pageNum
      vm.initPage()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.pageSize = pageLength
      vm.initPage()
    },
    handleRouterGo (toPage, id) {
      if (id != null) {
        this.$router.push({
          name: toPage,
          params: {
            id: id
          }
        })
      } else {
        this.$Message.warning('参数为空')
      }
    },
    addPage () {
      this.$router.push({
        name: 'case_node_role_add',
        params: {}
      }) // 类似post传参
    },
    initPage (goPage) {
      var params = {
        'nodeCode': this.nodeCode,
        'roleCode': this.roleCode
      }
      var vm = this
      params.pageNum = vm.currentPage
      params.pageSize = vm.pageSize
      params.nodeCode = vm.nodeCode
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/case_node_role/service/list', params).then(re => {
        this.totalPage = re.data.data.total
        this.tableDatas = []
        var datas = re.data.data.list || []
        datas.forEach(item => {
          var tData = {}
          tData.nodeName = item.nodeName
          tData.nodeCode = item.nodeCode
          tData.roleCode = item.roleCode
          tData.roleName = item.roleName
          if (item.status === 0) {
            tData.status = '有效' // '0有效  1失效',
          } else {
            tData.status = '失效'
          }
          tData.update_by = item.updatedBy
          tData.updated_date = this.$util.formatTime(new Date(item.updatedDate))
          tData.id = item.id
          this.tableDatas.push(tData)
        })
      }).catch(er => {})
    },
    initRoleCode () {
      this.$ajax.post(this.$appContext.marvels_core_system + 'system/pmsn/service/roleAll', {}).then(re => {
        this.roleCodeData = []
        var sData = {}
        sData.label = '请选择'
        sData.value = ''
        this.roleCodeData.push(sData)
        var datas = re.data.data || []
        datas.forEach(item => {
          var tData = {}
          tData.label = item.roleName
          tData.value = item.roleCode
          this.roleCodeData.push(tData)
        })
      }).catch(er => {})
    },
    // 加载流程节点下拉框
    initFlowCode () {
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/flow_node/service/nlist', {}).then(re => {
        this.nodeCodesData = []
        var fData = {}
        fData.label = '请选择'
        fData.value = ''
        this.nodeCodesData.push(fData)
        var datas = re.data.data.list || []
        datas.forEach(item => {
          var tData = {}
          tData.label = item.nodeName
          tData.value = item.nodeCode
          this.nodeCodesData.push(tData)
        })
      }).catch(er => {})
    }
  },
  created: function () {
    this.$ajax = this.$util.ajax()
    this.initFlowCode()
    this.initRoleCode()
    this.initPage()
  }
}
</script>

<style lang="less">

</style>
